import React, { PropTypes } from 'react';
import { Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import constants from '../../../common/constants';
import './less/index.less';

const propTypes = {
    // columnNum: PropTypes.number.isRequired,
    // data: PropTypes.array.isRequired,
};
const data = [
    {
        value: '1',
        label: '综合排序',
    }, {
        value: '2',
        label: '新品优先',
    },
];

class SelectItem extends React.Component{
    constructor(...args) {
        super(...args);
        this.state = {
            initData: '',
            show: false,
        };
    }
    onChange = (value) => {
        let label = '';
        data.forEach((dataItem) => {
            if (dataItem.value === value[0]) {
                label = dataItem.label;
                if (dataItem.children && value[1]) {
                    dataItem.children.forEach((cItem) => {
                        if (cItem.value === value[1]) {
                            label += ` ${cItem.label}`;
                        }
                    });
                }
            }
        });
        console.log(label);
    }
    handleClick = (e) => {
        e.preventDefault(); // Fix event propagation on Android
        this.setState({
            show: !this.state.show,
        });
        // mock for async data loading
        if (!this.state.initData) {
            setTimeout(() => {
                this.setState({
                    initData: data,
                });
            }, 500);
        }
    }
    priceSort = (e) => {
        e.preventDefault();
        console.log(1);
    }
    sellNumSort = (e) => {
        e.preventDefault();
        console.log(11);
    }
    filter = (e) => {
        e.preventDefault();
        console.log(111);
    }

    onMaskClick = () => {
        this.setState({
            show: false,
        });
    }
    render(){
        const { initData, show } = this.state;
        const menuEl = (
            <Menu
                className="single-foo-menu"
                data={initData}
                value={['1']}
                level={1}
                onChange={this.onChange}
                height={document.documentElement.clientHeight * 0.135}
            />
        );
        const loadingEl = (
            <div style={{ position: 'absolute', width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
                <ActivityIndicator size="large" />
            </div>
        );
        return (
            <div className={show ? 'single-menu-active' : ''}>
                <div style={{position:'absolute',height:'60px',width:'100%'}}>
                    <span onClick={this.handleClick} className="single-top-nav-bar" >综合<img src={!show ? constants.sortArrowDown : constants.sortArrowUp}/></span>
                    <span onClick={this.priceSort} className="single-top-nav-bar" >价格<img src={constants.sort}/></span>
                    <span onClick={this.sellNumSort} className="single-top-nav-bar" >销量</span>
                    <span onClick={this.filter} className="single-top-nav-bar" >筛选<img src={constants.filter}/></span>
                </div>
                {show ? initData ? menuEl : loadingEl : null}
                {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
            </div>
        );
    }
}
SelectItem.propTypes = propTypes;
export default SelectItem;